<template>
  <div class="word">
    <div class="rounded-square" :style="{ backgroundColor }">
      <img :src="imgSrc" />
      <span>{{ value }}</span>
    </div>
    <div>{{ title }}</div>
  </div>
</template>

<script setup>
defineProps(["title", "value", "imgSrc", "backgroundColor"]);
</script>

<style scoped>
.word {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 120px;
  border: 1px solid #ccc;
}

.rounded-square {
  height: 120px;
  width: 130px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    color: white;
    position: absolute;
    left: 50%;
    top: 79%;
    transform: translate(-50%, -50%);
  }

  img {
    width: 70px;
    height: 70px;
    position: absolute;
    left: 50%;
    top: 13%;
    transform: translate(-50%, -12%);
  }
}
</style>
